<template>
  <el-card class="main-table">
    <div class="btn">
      <el-button icon="el-icon-circle-plus-outline" class="new-work" @click="$emit('update:createDialogShow',true) ">新建</el-button>
    </div>
    <!-- table -->
    <el-table
      :data="dataList"
      style="width: 100%"
      :header-cell-style="{background:'#f3f6fb'}"
    ><slot name="tableBody" /></el-table>
    <el-row v-if="isFootle" class="bottom-pre" type="flex" align="center" justify="space-between">
      <el-col :span="20">
        <span class="demonstration">共{{ pagerInfo.totalCount }}条记录</span>
        <span class="demonstration">第{{ pagerInfo.pageIndex }}/{{ pagerInfo.totalPage }}页</span>
      </el-col>
      <el-col :span="4">
        <el-row type="flex" align="center" justify="start">
          <el-col :span="8" />
          <el-col :span="8">
            <el-button
              class="page up-page"
              :class="{'no-btn':pagerInfo.pageIndex==='1'}"
              :disabled="pagerInfo.pageIndex==='1'"
              @click="$emit('upPage')"
            >上一页</el-button>
          </el-col>
          <el-col :span="8">
            <el-button
              class="page last-page"
              :class="{'no-btn':pagerInfo.pageIndex===pagerInfo.totalPage }"
              :disabled="pagerInfo.pageIndex===pagerInfo.totalPage"
              @click="$emit('nextPage')"
            >下一页</el-button>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </el-card>
</template>
<script>
export default {
  props: {
    pagerInfo: {
      type: Object,
      default: () => ({})
    },
    dataList: {
      type: Array,
      required: true
    },
    isFootle: {
      type: Boolean,
      default: true
    }
  }
}
</script>

<style scoped lang='less'>
.main-table{
 width: 1713px;
 .btn{
  display: flex;
  align-items: center;
  margin: 0 0 20px;
  height: 36px;
  .new-work{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 86px!important;
    height: 40px;
    padding: 0;
    color:#fff;
    background: linear-gradient(135deg,#ff7d43,#db3602)!important;
    .el-icon-circle-plus-outline{
      font-size: 16px;
    }
  }
  .work-info{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80px!important;
    height: 36px;
    padding: 0;
    background-color: #fbf4f0!important;
    border: none;
    color: #655b56!important;
}
 }
 .work-list-info{
  cursor: pointer;
  color: #5f84ff;
 }
 .demonstration{
  display: inline-block;
  margin-right: 15px;
  font-size: 16px!important;
    color: #dbdfe5!important;
    line-height: 40px;
 }
 .bottom-pre{
  padding: 32px 16px 12px 16px;
 }
 .page{
    background-color: #d5ddf8;
    color: #606266;
    display: inline-block;
    font-size: 13px;
    height: 32px;
    width: 70px;
    padding: 0;
    line-height: 32px;
    vertical-align: top;
    box-sizing: border-box;
 }
 .no-btn{
  background: #edf0f9;
  color: #d8dde3;
 }
 /deep/.el-table__row>td{
  /* 去除表格线 */
  border: none!important;
}
}
</style>
